<template>
	<view class="container">
		<u-navbar placeholder :autoBack="true">
			<template slot="center">
				<view class="pad-left-right-10 mar-left-50 search">
					<u-search @search="hanldeSearch" :showAction="false" placeholder="请输入搜索内容"></u-search>
				</view>
			</template>
		</u-navbar>

		<view v-if="list.length > 0" class="  pad-left-right-26 mar-top-32">
			<goods :list="list" @click="hanldeGoodsList"></goods>
		</view>
		<u-empty v-if="list.length == 0" text=" " marginTop="100" icon="../../static/image/empty.png"></u-empty>
		<u-loadmore v-if="list.length > 0" :status="pageStatus" color="#df0007" iconColor="#df0007" />
	</view>
</template>

<script>
	// 接口地址
	import {
		groupPageList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 列表数据
				list: [],
				// page
				pageInfo: {
					page: 1,
					ps: 10,
					s_goods_name: ''
				},
				// 加载状态
				pageStatus: 'loadmore'
			}
		},
		methods: {
			// 搜索事件
			hanldeSearch(e) {
				this.pageInfo.s_goods_name = e;
				this.getList();
			},
			// 跳转
			hanldeGoodsList(goods_id) {
				uni.navigateTo({
					url: '/pages/market/marketGoodsList?id=' + goods_id
				})
			},
			// 获取列表
			async getList() {
				let {
					data
				} = await groupPageList(this.pageInfo);

				this.pageData = data;
				this.pageInfo.page = data.current_page + 1;
				this.list = this.list.concat(data.data);
				this.pageStatus = 'loadmore'
				// 没有更多了
				if (this.pageData.next_page_url == null) {
					this.pageStatus = 'nomore'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: 100vh;
		
		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}
		
	}

	.search {
		.u-search {
			width: 600rpx;
		}
	}
</style>